/* 示例文件通用样式 */

body {
  margin: 0;
  padding: calc(24 * var(--unit));
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  background-color: var(--color-background-secondary);
  min-height: 100vh;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
}

.example-section {
  background: var(--color-comp-background-primary);
  border-radius: calc(12 * var(--unit));
  padding: calc(24 * var(--unit));
  margin-bottom: calc(24 * var(--unit));
  box-shadow: 0 calc(2 * var(--unit)) calc(8 * var(--unit)) rgba(0, 0, 0, 0.1);
}

.example-section-title {
  font-size: var(--font-size-title-medium);
  font-weight: var(--font-weight-title);
  color: var(--color-font-primary);
  margin-bottom: calc(16 * var(--unit));
}

.example-subtitle {
  font-size: var(--font-size-title-sub-medium);
  font-weight: var(--font-weight-medium);
  color: var(--color-font-primary);
  margin-bottom: calc(12 * var(--unit));
  margin-top: calc(24 * var(--unit));
}

.example-group {
  display: flex;
  flex-wrap: wrap;
  gap: calc(16 * var(--unit));
  align-items: center;
  margin-bottom: calc(16 * var(--unit));
}

.example-group-column {
  flex-direction: column;
  align-items: stretch;
}

.example-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(8 * var(--unit));
}

.example-form-group {
  margin-bottom: calc(24 * var(--unit));
}

.example-label {
  display: block;
  font-size: var(--font-size-title-sub-small);
  font-weight: var(--font-weight-medium);
  color: var(--color-font-primary);
  margin-bottom: calc(8 * var(--unit));
}

.example-hint {
  font-size: var(--font-size-caption-medium);
  color: var(--color-font-tertiary);
  margin-top: calc(4 * var(--unit));
}

.code-block {
  background: var(--color-background-secondary);
  padding: calc(16 * var(--unit));
  border-radius: calc(8 * var(--unit));
  overflow-x: auto;
  font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, monospace;
  font-size: var(--font-size-body-small);
  line-height: 1.5;
  margin: calc(16 * var(--unit)) 0;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: calc(24 * var(--unit));
  margin-bottom: calc(24 * var(--unit));
}

.card-image {
  width: 100%;
  height: calc(200 * var(--unit));
  background: linear-gradient(135deg, var(--color-brand) 0%, var(--color-brand60) 100%);
  object-fit: cover;
  display: block;
}

/* 演示用背景色类 */
.bg-brand {
  background-color: var(--color-brand);
}

.bg-secondary {
  background-color: var(--color-background-secondary);
}

.bg-tertiary {
  background-color: var(--color-background-tertiary);
}

/* 演示容器高度 */
.demo-height {
  height: calc(100 * var(--unit));
}

.grid-demo {
  height: calc(200 * var(--unit));
}

/* 进度条演示容器 */
.progress-demo {
  width: 100%;
  max-width: calc(400 * var(--unit));
  margin-bottom: calc(16 * var(--unit));
}

/* 工具提示演示容器 */
.tooltip-demo {
  justify-content: center;
  gap: calc(40 * var(--unit));
  margin: calc(40 * var(--unit)) 0;
}

/* 演示用进度条宽度 - 仅用于示例演示，实际使用时应该通过JS动态设置 */
.progress-bar-demo-0 {
  width: 0%;
}

.progress-bar-demo-25 {
  width: 25%;
}

.progress-bar-demo-50 {
  width: 50%;
}

.progress-bar-demo-60 {
  width: 60%;
}

.progress-bar-demo-75 {
  width: 75%;
}

.progress-bar-demo-100 {
  width: 100%;
}

